logo
Published on

你一定踩过的微信h5的坑

Authors

解决IOS点击按钮出现黑色背景

-webkit-tap-highlight-color: transparent;

监听物理返回键(跳转指定页面)

// 封装push历史记录的方法
function pushHistory() {
  var state = {
    title: 'title',
    url: '#forward',
  }
  window.histroy.pushState(state, null, '#forward')
}

// 在需要监听的页面调用
pushHistory()

window.addEventListener('popstate', function (e) {
  // 监听返回键,跳转指定页面
  window.location.href = 'xxx'
})

监听物理返回键(Vue版本)

mounted() {
  // 判断浏览器是否支持popstate(返回键)
  if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.myPopState, false);
  }
},

//自定义返回键方法
 myPopState() {
  console.log('点击返回键')
  this.$router.go(-1);
},

//页面销毁,务必取消监听
destroyed() {
  window.removeEventListener("popstate", this.goBack, false);
},